<template>
  <div>
    <int :info="info"></int>
    <div class="cen">
      <el-row class="tit">
        <el-col :span="4">
          <el-row>
            <el-col :span="12">
              <div
                :class="state == 0 ? 'at bi-bg' : 'no bi'"
                @click="changeState(0)"
              >
                按部位
              </div></el-col
            >
            <el-col :span="12">
              <div
                :class="state == 0 ? 'no yi' : 'at yi-bg'"
                @click="changeState(1)"
              >
                按科室
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8" :offset="12">
          <!-- <el-input placeholder="请输入疾病名称" v-model="input2" class="input">
            <template slot="append" class="rig">
              <i class="el-icon-search"></i>
            </template>
          </el-input> -->

          <el-autocomplete
            class="input"
            v-model="input2"
            :fetch-suggestions="querySearch"
            placeholder="请输入疾病名称"
            @select="handleSelect"
          >
            <el-button @click.capture="search()" slot="append">
              <i class="el-icon-search searchIcon"></i>
            </el-button>
          </el-autocomplete>
        </el-col>
      </el-row>
      <div v-show="state == 0">
        <el-row>
          <el-col :span="15" class="bodyri">
            <el-row>
              <el-col :span="4">
                <img src="../assets/map.png" class="img1" />
              </el-col>
              <el-col :span="15">
                <BodyVue
                  class="body"
                  old="warehouse"
                  @search="search"
                ></BodyVue>
              </el-col>
              <el-col :span="5">
                <!-- <span class="tips"
                  ><i class="el-icon-s-opportunity"></i
                  >鼠标移到人体某些部位<br />
                  可查看该部位的疾病分类</span
                > -->
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="9">
            <div class="guess ri-line">
              <h5>猜你想找</h5>
              <el-row>
                <el-col
                  :span="8"
                  v-for="(item, index) in guList"
                  :key="index"
                  class="guitem"
                  @click.native="diseaseDetails(item.id)"
                >
                  <p>{{ item.name }}</p>
                  <div>
                    <!-- <span v-for="item2 in item.tag.split(',')" :key="item2">{{ -->
                    <span>
                      {{ item.partPname }}
                    </span>
                    <span>
                      {{ item.partName }}
                    </span>
                    <span>
                      {{ item.departmentPname }}
                    </span>
                    <span>
                      {{ item.departmentName }}
                    </span>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div>
              <KnowledgeRec></KnowledgeRec>
            </div>

            <div></div>
          </el-col>
        </el-row>
      </div>
      <div class="fenlei">
        <el-row>
          <el-col :span="2" class="tit">一级分类：</el-col>
          <el-col :span="22">
            <span
              v-for="(item, index) in cla"
              :key="item.id"
              @click="selectYiJi(item.id, index)"
              :class="friInd == item.id ? 'yiji yijiAc' : 'yiji'"
              ><img :src="item.iconImg" alt="" />{{ item.name }}</span
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" class="tit">二级分类：</el-col>
          <el-col :span="22">
            <span
              v-for="item in secCla"
              :key="item.id"
              @click="selectSec(item.id)"
              :class="secInd == item.id ? 'yiji yijiAc' : 'yiji'"
              >{{ item.name }}</span
            >
          </el-col>
        </el-row>
      </div>

      <div class="content">
        <p>
          当前共<span>{{ total ? total : 0 }}</span
          >个结果
        </p>
        <div>
          <el-row>
            <el-col
              :span="5"
              v-for="(item, index) in disList"
              :key="item.id"
              :class="(index + 1) % 5 == 0 ? 'disitem ri-mar' : 'disitem'"
              @click.native="diseaseDetails(item.id)"
            >
              <div><img :src="item.imgUrl" alt="" /></div>
              <h1>{{ item.name }}</h1>
              <div class="label">
                <span v-show="item.partPname != null" :class="colorArr[0]">{{
                  item.partPname
                }}</span>
                <span v-show="item.partName != null" :class="colorArr[1]">{{
                  item.partName
                }}</span>
                <span
                  v-show="item.departmentPname != null"
                  :class="colorArr[2]"
                  >{{ item.departmentPname }}</span
                >
                <span
                  v-show="item.departmentName != null"
                  :class="colorArr[3]"
                  >{{ item.departmentName }}</span
                >
              </div>
              <el-row class="bot">
                <el-col :span="20" class="cont">{{ item.introduce }}</el-col>
                <el-col
                  :span="4"
                  class="icon"
                  @click.native.stop="changeLike(item)"
                >
                  <i
                    v-show="!item.isCollection"
                    class="iconfont icon-shoucang"
                  ></i>
                  <i
                    v-show="item.isCollection"
                    class="iconfont icon-shoucang1"
                  ></i>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-pagination
          background
          :hide-on-single-page="true"
          layout="prev, pager, next"
          :total="total"
          class="fenye"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <el-row class="centop">
        <el-col :span="4">
          <span class="acspan">经验推荐</span>
        </el-col>
        <el-col :span="3" :offset="17"> </el-col>
      </el-row>
      <div class="exp">
        <Exprec></Exprec>
      </div>
    </div>
  </div>
</template>

<script>
import Int from "../components/Int.vue";
import Exprec from "../components/Exprec.vue";
import BodyVue from "@/components/Body.vue";
import KnowledgeRec from "@/components/KnowledgeRec.vue";
import utils from "../utils/utils";
export default {
  components: {
    Int,
    Exprec,
    BodyVue,
    KnowledgeRec,
  },
  data() {
    return {
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      input2: "", //搜索
      info: {
        name: "疾病库",
        enName: "Disease bank",
        text: "涵盖了目前最常见的564种疾病，并做了详细分类。疾病包含疾病简介、疾病病因、典型症状、疾病预防等信息。",
        enText:
          "It covers the most common 564 diseases and makes a detailed classification. The disease includes disease introduction",
        img: require("../assets/s3.png"),
      },
      state: 0, //当前显示状态 0为按部位1为按科室
      total: 0, //疾病数量
      sicknessNames: [],
      staCla: {
        //两种状态的分类
        pos: [],
        dep: [],
      },
      sicknessDto: {
        departmentId: null,
        departmentPid: null,
        partId: null,
        partPid: 1,
        page: 1,
        size: 10,
      },
      secCla: [], //二级分类
      friInd: 0, //选中的一级分类图标
      secInd: 0, //选中的二级分类图标
      guList: [
        {
          id: 1,
          name: "高血压",
          label: ["腹部", "头部"],
        },
        {
          id: 2,
          name: "脑出血",
          label: ["颅脑", "头部"],
        },
      ],

      disList: [
        // {
        //   id: 1,
        //   name: "高血压",
        //   img: "http://5b0988e595225.cdn.sohucs.com/images/20181030/04c9a600df8d4771839c37e69a38b8e9.jpeg",
        //   label: ["内科", "心血管内科", "胸部"],
        //   cont: "临床以发作性中重度、搏动样头痛为主要表现，一般持续4～72小时，可伴有恶心、呕吐，光...",
        //   isLike: false,
        // },
      ],
    };
  },
  computed: {
    cla() {
      //一级分类
      return this.state == 0 ? this.staCla.pos : this.staCla.dep;
    },
  },
  created() {
    //获取分类树
    this.$store.dispatch("getClassifyTree").then(() => {
      this.staCla.pos = this.$store.state.classifyTree.partTree;
      this.staCla.dep = this.$store.state.classifyTree.departmentTree;
      this.changeState(0);
    });
    
  },
  mounted() {
    this.loadName();
    this.getHotSickness();
    this.changePage();
    // 搜索
    
    if (this.$route.params.input) {
      setTimeout(()=>{
        this.search(this.$route.params.input);
      },1000)
    }
  },
  methods: {
    changeState(num) {
      this.state = num;
      this.selectYiJi(
        num == 0 ? this.staCla.pos[0].id : this.staCla.dep[0].id,
        0
      );
    },
    selectYiJi(pid, index) {
      //根据一级分类id查询二级分类
      this.friInd = pid;
      this.sicknessDto.partId = null;
      this.sicknessDto.departmentId = null;
      if (this.state == 0) {
        this.secCla = this.staCla.pos[index].children;
        this.sicknessDto.departmentPid = null;
        this.sicknessDto.partPid = pid;
      } else {
        this.secCla = this.staCla.dep[index].children;
        this.sicknessDto.partPid = null;
        this.sicknessDto.departmentPid = pid;
      }
      this.selectSickness();
    },
    selectSec(ind) {
      this.secInd = ind;
      //根据二级分类id查询疾病
      this.sicknessDto.partPid = null;
      this.sicknessDto.departmentPid = null;
      if (this.state == 0) {
        this.sicknessDto.departmentId = null;
        this.sicknessDto.partId = ind;
      } else {
        this.sicknessDto.partId = null;
        this.sicknessDto.departmentId = ind;
      }
      this.selectSickness();
    },
    selectSickness() {
      this.$axios({
        method: "get",
        url: "/sickness/selectByPage",
        params: this.sicknessDto,
      }).then((res) => {
        this.disList = res.data;
        this.total = res.count;
      });
    },
    diseaseDetails(sicknessId) {
      this.$router.push({
        path: "/main/diseasedetails",
        name: "DiseaseDetails",
        params: { id: sicknessId },
      });
    },
    changeLike(obj) {
      let isLogin = utils.getStorage("isLogin");
      if (isLogin) {
        this.$axios({
          method: "post",
          url: "/collection/addOrCancel",
          params: {
            userId: utils.getStorage("userinfo").id,
            title: obj.name,
            targetId: obj.id,
            img: obj.imgUrl,
            type: 1,
            tag: obj.tag,
            status: obj.isCollection ? -1 : 1,
          },
        }).then((res) => {
          if (res.code === "200") {
            obj.isCollection = !obj.isCollection;
          } else {
            this.$message({
              message: "网络异常,收藏失败!",
              type: "error",
            });
          }
        });
      } else {
        this.$router.push("/main/login");
      }
    },
    //查询热点疾病的名称
    loadName() {
      this.$axios({
        method: "get",
        url: "/sickness/searchName",
      })
        .then((res) => {
          this.sicknessNames = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    querySearch(queryString, cb) {
      var restaurants = this.sicknessNames;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.$axios({
        method: "get",
        url: "/sickness/searchByName",
        params: { name: item.value },
      }).then((res) => {
        this.total = res.data.length;
        this.disList = res.data;
      });
    },
    search(text) {
      this.$axios({
        method: "get",
        url: "/sickness/searchByName",
        params: { name: text ? text : this.input2 },
      }).then((res) => {
        this.total = res.data && res.data.length;
        this.disList = res.data;
        if (this.state == 0) {
          scrollTo(0, 1100);
        }
      });
    },
    getHotSickness() {
      this.$axios({
        method: "get",
        url: "/sickness/getHotSickness",
      }).then((res) => {
        // console.log(res.data);
        this.guList = res.data;
      });
    },
    //改变页数
    changePage(page) {
      this.$axios({
        url: "/sickness/selectByPage",
        method: "get",
        params: { ...this.sicknessDto, page: page },
      }).then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.disList = res.data;
          this.total = res.count;
          if (this.$route.params.input) {
            this.input2 = this.$route.params.input;
            this.search();
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../less/warehouse.less");
</style>